<nz-spin [nzSpinning]="_isSpinning">
<form nz-form  [formGroup]="validateForm" (ngSubmit)="submitForm($event,validateForm.value)">
  <div nz-form-item nz-row>
    <h3>新增/修改图书</h3>
  </div>
  <div nz-col [nzSpan]="12">
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="4">
          <label nz-form-item-required>书名</label>
        </div>
        <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('name')" nzHasFeedback>
          <nz-input formControlName="name" [(ngModel)] = "name" [nzType]="'text'" [nzPlaceHolder]="'请填写'" [nzSize]="'large'" >
          </nz-input>
          <div nz-form-explain *ngIf="getFormControl('name').dirty&&getFormControl('name').hasError('required')">请输入您的用户名！</div>
          <div nz-form-explain *ngIf="getFormControl('name').dirty&&getFormControl('name').hasError('duplicated')">用户名是多余的！</div>
          <div nz-form-explain *ngIf="getFormControl('name').dirty&&getFormControl('name').pending">校验中...</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="4">
          <label nz-form-item-required>作者</label>
        </div>
        <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('author')" nzHasFeedback>
          <nz-input formControlName="author" [(ngModel)] = "author" [nzPlaceHolder]="'作者'" [nzType]="'author'" [nzSize]="'large'">
          </nz-input>
          <div nz-form-explain *ngIf="getFormControl('author').dirty&&getFormControl('author').hasError('required')">请输入作者！</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="4">
          <label>发布类型</label>
        </div>
        <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('choosetype')">
          <nz-checkbox-group formControlName="choosetype" [(ngModel)]="checkOptionsOne" ></nz-checkbox-group>

        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-col [nzSpan]="4" nz-form-label>
          <label nz-form-item-required>关键词</label>
        </div>
        <div>
          <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('keyword')" nzHasFeedback>
            <nz-input formControlName="keyword" [(ngModel)]="keyword"  [nzPlaceHolder]="'关键词'" [nzType]="'text'" [nzSize]="'large'">
            </nz-input>
            <div nz-form-explain *ngIf="getFormControl('keyword').dirty&&getFormControl('keyword').hasError('required')">请输入关键词！</div>
          </div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-col [nzSpan]="4" nz-form-label>
          <label nz-form-item-required>书籍状态</label>
        </div>
        <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('status')" nzHasFeedback>
            <nz-select formControlName="status" [nzSize]="'large'" [(ngModel)]="status" >
              <nz-option [nzLabel]="'未发布'" [nzValue]="'0'"></nz-option>
              <nz-option [nzLabel]="'已发布'" [nzValue]="'1'"></nz-option>
              <nz-option [nzLabel]="'已下架'" [nzValue]="'2'"></nz-option>
            </nz-select>

          <div nz-form-explain *ngIf="getFormControl('status').dirty&&getFormControl('status').hasError('required')">请确认密码！</div>
          <div nz-form-explain *ngIf="getFormControl('status').dirty&&getFormControl('status').hasError('confirm')">您输入的两个密码不一致！</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-col [nzSpan]="4" nz-form-label>
          <label nz-form-item-required>书籍简介</label>
        </div>
        <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('description')">
          <nz-input formControlName="description" [nzRows]="2" [nzType]="'textarea'" [nzPlaceHolder]="'请填写'" [(ngModel)]="description" [nzSize]="'large'">
          </nz-input>
          <div nz-form-explain *ngIf="getFormControl('description').dirty&&getFormControl('description').hasError('required')">请在这里写点什么！</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-col [nzSpan]="4" nz-form-label>
          <label nz-form-item-required>出版社</label>
        </div>
        <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('publish')">
          <nz-input formControlName="publish" [(ngModel)]="publish" [nzRows]="2" [nzType]="'text'" [nzPlaceHolder]="'请填写'" [nzSize]="'large'">
          </nz-input>
          <div nz-form-explain *ngIf="getFormControl('publish').dirty&&getFormControl('publish').hasError('required')">请在这里写点什么！</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-col [nzSpan]="4" nz-form-label>
          <label nz-form-item-required>出版编号</label>
        </div>
        <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('publishno')">
          <nz-input formControlName="publishno" [(ngModel)]="publishno" [nzRows]="2" [nzType]="'text'" [nzPlaceHolder]="'请填写'" [nzSize]="'large'">
          </nz-input>
          <div nz-form-explain *ngIf="getFormControl('publishno').dirty&&getFormControl('publishno').hasError('required')">请在这里写点什么！</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-col [nzSpan]="4" nz-form-label>
          <label nz-form-item-required>出版日期</label>
        </div>
        <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('publishtime')">
            <nz-datepicker formControlName="publishtime"  [(ngModel)]="publishtime" [nzSize]="'large'" [nzPlaceHolder]="'请选择出版日期'" style="width: 100%;"  [nzDisabledDate]="_disabledDate"></nz-datepicker>
            <div nz-form-explain *ngIf="getFormControl('publishtime').dirty&&getFormControl('publishtime').hasError('required')">请选择出版日期!</div>
        </div>
      </div>
  </div>

  <div nz-col [nzSpan]="12">
    <div nz-form-item nz-row>
      <div nz-col [nzSpan]="4" nz-form-label>
        <label nz-form-item-required>出版城市</label>
      </div>
      <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('publishcity')">
        <nz-cascader [nzSize]="'large'"
                     formControlName="publishcity"
                     [nzExpandTrigger]="'hover'"
                     [nzOptions]="_options"
                     [(ngModel)]="publishcity"
                     (ngModelChange)="_console($event)"
                     (nzChange)="_console($event)">
        </nz-cascader>
        <div nz-form-explain *ngIf="getFormControl('publishcity').dirty&&getFormControl('publishcity').hasError('required')">请选择出版城市!</div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-col [nzSpan]="4" nz-form-label>
        <label nz-form-item-required>时间线</label>
      </div>
      <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('period')">
        <nz-select  [nzSize]="'large'" formControlName="period" [(ngModel)]="period" nzAllowClear>
          <nz-option
            *ngFor="let option of timeperiod"
            [nzLabel]="option"
            [nzValue]="option">
          </nz-option>
        </nz-select>
        <div nz-form-explain *ngIf="getFormControl('period').dirty&&getFormControl('period').hasError('required')">请选择时间线!</div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-col [nzSpan]="4" nz-form-label>
        <label nz-form-item-required>isbn</label>
      </div>
      <div nz-col [nzSpan]="12" nz-form-control [nzValidateStatus]="getFormControl('isbn')">
        <nz-input formControlName="isbn" [nzRows]="2" [nzType]="'text'" [nzPlaceHolder]="'请填写'" [nzSize]="'large'" [(ngModel)]="isbn">
        </nz-input>
        <div nz-form-explain *ngIf="getFormControl('isbn').dirty&&getFormControl('isbn').hasError('required')">请在这里写点什么！</div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-col [nzSpan]="4" nz-form-label>
        <label>事件地点</label>
      </div>
      <div nz-col [nzSpan]="12" nz-form-control >
        <nz-input formControlName="place" [nzRows]="2" [nzType]="'text'" [nzPlaceHolder]="'请填写'" [nzSize]="'large'" [(ngModel)]="place">
        </nz-input>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-col [nzSpan]="4" nz-form-label>
        <label nz-form-item-required>上传封面图</label>
      </div>
      <div nz-col [nzSpan]="12" nz-form-control>
        <input type="hidden" formControlName="pic" value="picid">
        <app-previewimg  [(previewImgSrcs)]="previewImgSrcs" (previewImgFileChange)="toSet()"  [(previewImgFile)]="previewImgFile" [maxPic]="1" style="padding: 0px"></app-previewimg>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-col [nzSpan]="4" nz-form-label>
        <label>上传附件</label>
      </div>
      <div nz-col [nzSpan]="12" nz-form-control >
        <ul class="filegroup">
          <li *ngFor="let item of fileList">
            <img [src]="item.showurl" alt="">
            <nz-tooltip [nzTitle]="item.originalname" [nzPlacement]="'bottom'">
              <p nz-tooltip>{{item.originalname}}</p>
            </nz-tooltip>
            <div>
              <span >
                <i class="anticon anticon-eye seeImg" *ngIf="item.preview!='2'" (click) = "toDos(item.preview,item.showurl,item.id,item.actualsize,item.standardsize)"></i>
                <i [ngClass]="{'tocenter':item.preview=='2'}" class="anticon anticon-delete uploadimgremove" (click)="remove(item.id)"></i>
              </span>
            </div>
          </li>

        </ul>
        <a style="line-height: 28px" nz-button [nzType]="'primary'" (click)="showModal('文件上传')">上传附件</a>

      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-col [nzOffset]="4" [nzSpan]="12" nz-form-control>
        <button nz-button [nzType]="'primary'" [nzSize]="'large'"  (click)="submitFn()" [disabled]="!validateForm.valid">提交</button>
        <button nz-button [nzSize]="'large'" style="float: right" (click)="resetForm($event)">重置</button>
      </div>
    </div>
  </div>


</form>
<!--<div [disabled]="!validateForm.valid"></div>-->

</nz-spin>
<nz-modal [nzWidth]="width" [nzVisible]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel($event)">
  <ng-template #modalTitle>
    {{names}}
  </ng-template>
  <ng-template #modalContent style="background-color: #999">
    <iframe *ngIf="names=='文件上传'" style="width: 840px;height: 380px;margin-left: 28px" [src]="src" frameborder="0"></iframe>
    <div *ngIf="names!='文件上传'" style="width: 420px;display: block;margin: 0 auto;background-color: #999" >
      <img style="width: 420px;display: block;margin: 0 auto;"  [src]="seeurl" alt="">
    </div>
  </ng-template>
</nz-modal>
